import React, { Component } from 'react'
import {Table, Column, Cell} from 'fixed-data-table-2'
import { Button } from 'antd';
import {PageButton, FormBox} from '../../components/ListComponent'
import Dimensions from 'react-dimensions'
import AddUserPage from './AddUserPage'


class ListTest extends Component {

    constructor(props) {
        super(props);
        this.pageNext = this.pageNext.bind(this);
        this.getListData = this.getListData.bind(this);
        this.hiddenBox = this.hiddenBox.bind(this);
        this.cellEditHandle = this.cellEditHandle.bind(this);
        this.state = {
            indexList: [],//当前渲染的页面数据
            current: 1, //当前页码
            pageSize: 10, //每页显示的条数
            totalPage: 0,//总页数
            totalCount: 0, //总记录数
            formBoxStyleMin :'', //formbox的动画移动标识
            formBoxStyleHeight : '', //formbox的动画移动宽度
            conditonData: {}  //查询条件
        };

        //table列表展示列配置
        //showName、columnName 必有属性， columnWidth 可选，默认100
        this.tableColumn = [
            {
                showName: '登录账户名',
                columnName: 'loginName',
                columnWidth: 130
            },{
                showName: '人员姓名',
                columnName: 'userName'
            },{
                showName: '邮件地址',
                columnName: 'email'
            },{
                showName: '座机号',
                columnName: 'phone'
            },{
                showName: '手机号',
                columnName: 'mobile',
                columnWidth: 130
            },{
                showName: '头像地址',
                columnName: 'avatarUrl'
            },{
                showName: '最后登录IP',
                columnName: 'loginIp'
            },{
                showName: '最后登录时间',
                columnName: 'loginDate'
            },{
                showName: '是否可登录',
                columnName: 'loginFlag'
            },{
                showName: '是否初始化标志',
                columnName: 'initFlag'
            },{
                showName: '最后密码修改时间',
                columnName: 'lastPwdModifed'
            },{
                showName: '创建人',
                columnName: 'createBy'
            },{
                showName: '创建时间',
                columnName: 'gmtCreate'
            },{
                showName: '更新人',
                columnName: 'lastModifiedBy'
            },{
                showName: '更新时间',
                columnName: 'gmtModified'
            },{
                showName: '有效标志',
                columnName: 'activeFlag'
            },{
                showName: '备注',
                columnName: 'remark'
            }
        ];

        //搜索属性配置
        this.searchComponentData = [
            {
                decName: '登录账户名',
                name:'loginName',
                type: 'input',
                url: null
            },{
                decName: '人员姓名',
                name:'userName',
                type: 'input',
                url: null
            },{
                decName: '邮件地址',
                name:'email',
                type: 'input',
                url: null
            },{
                decName: '座机号',
                name:'phone',
                type: 'input',
                url: null
            },{
                decName: '手机号',
                name:'mobile',
                type: 'input',
                url: null
            }
        ];
    }

    componentWillMount() {
        this.getListData();
    }

    //获取数据
    getListData(num, pageSize, conditonData) {
        if(typeof(num) == "undefined" || num == null || num.length==0){
            num = this.state.current;
        }
        if(typeof(pageSize) == "undefined" || pageSize == null || pageSize.length==0){
            pageSize = this.state.pageSize;
        }
        if(typeof(conditonData) == "undefined" || conditonData == null || conditonData.length==0){
            conditonData = this.state.conditonData
        }else{
            //点击搜索，有查询条件，分页要重新从第一页开始
            num = 1;
            //保存查询条件
            this.setState({
                conditonData: conditonData
            });
        }

        //let conData = { page: num, rows: pageSize, condition: conditonData };
        //$.ajax({url: this.props.url,type: 'post',contentType:'application/json; charset=utf-8', dataType: 'json', data: JSON.stringify(conData) })
        $.ajax({url: '/base/auth/user/list', type: 'post', dataType: 'json', data: { page: num, rows: pageSize, ...conditonData } })
            .done(function (resData, status, xhr) {
                //console.log("getList返回数据：\n",JSON.stringify(resData, null, 4));
                if(resData.code == "1"){
                    this.setState({
                        indexList: resData.data.records,  //当前页面数据
                        totalCount: resData.data.totalCount, //总记录数
                        totalPage: resData.data.totalPage,//总页数
                        current: num, //当前页码
                        pageSize: pageSize, //每页显示的条数
                    });
                }else{
                    console.log("请求数据错误：", resData.message);
                }
            }.bind(this));
    }

    pageNext(num, pageSize, conditonData) {
        this.getListData(num, pageSize, conditonData);
    }

    hiddenBox(){
        let formBoxStyleMin = this.state.formBoxStyleMin;
        if (formBoxStyleMin == ''){
            formBoxStyleMin = 'formBoxStyleMin';
        } else {
            formBoxStyleMin = ''
        }
        this.setState({
            formBoxStyleMin :formBoxStyleMin
        })
    }

    componentDidMount() { //formbox高度
        let height = window.getComputedStyle(this.refs.formBoxRef).height;
        this.setState({
            formBoxStyleHeight:height
        })
    }
    addHandle= () =>{
        this.refs.addUser.addHandle();
    }

    cellEditHandle(userObj) {
        this.refs.addUser.updateHandle(userObj);
    }

    cellDeleHandle= (loginName) =>{
        console.log("删除数据=====", loginName);
        this.refs.addUser.deleteHandle(loginName);
    }

    render() {
        //当左侧隐藏时，列表宽度加上左侧的宽度，
        //this.props.isHideLeft 最顶级赋值是在页面 containers/Main/main.js
        let isHideLeft = this.props.isHideLeft;

        let formBoxStyleHeight = this.state.formBoxStyleHeight;
        let formBoxStyleMin = this.state.formBoxStyleMin;
        let divStyle = {}
        if (formBoxStyleMin){
            divStyle = {
                //height: '33px',
                height: '0px',
                transition: 'all 0.5s linear',
                overflowY: 'auto'
            };
        } else {
            divStyle = {
                //height: formBoxStyleHeight,
                height: '115px',
                transition: 'all 0.5s linear',
                overflowY: 'auto'
            };
        }
        let searchComponentData = this.searchComponentData;
        let tableColumn = this.tableColumn;
        let dataList = this.state.indexList;
        dataList =　dataList==null?[]:dataList;

        const {containerHeight, containerWidth, ...props} = this.props;
        let containerWidth_hide_left = containerWidth;
        //当左侧隐藏时，列表宽度加上左侧的宽度，
        // 当前this.props.isHideLeft 是从父组件ListBox传过来
        //this.props.isHideLeft 最顶级赋值是在页面 containers/Main/main.js
        if(this.props.isHideLeft){
            containerWidth_hide_left += 240;
        }

        return (
            <div className="wrap">
                <div className={'formBoxStyle '+formBoxStyleMin} ref='formBoxRef'  >
                    <div className='formTitle'>
                        <span className='left'>查询条件</span>
                        <span className='right'>
                        <i className="slidUp" onClick={this.hiddenBox}></i>
                            {/*<i className="slidDown"></i>*/}
                  </span>
                    </div>
                    <div style={divStyle}>
                        <FormBox searchComponentData={searchComponentData} pageNext={this.pageNext} />
                    </div>
                </div>
                <div className='formBoxStyle'>
                    <div className='formTitle'>
                        <span className='left'>数据列表</span>
                        <span className='right'>
                            <Button className='mr-10' type="primary" onClick={this.addHandle}>新增</Button>
                        </span>
                    </div>

                    <Table
                        rowHeight={50}
                        headerHeight={50}
                        rowsCount={dataList.length}
                        width={containerWidth_hide_left}
                        height={containerHeight}
                        {...this.props}>

                        <Column
                            header={<Cell></Cell>}
                            cell={({rowIndex}) => (<Cell>{rowIndex+1}</Cell>)}
                            fixed={true}
                            width={50}
                        />
                        {
                            tableColumn.map((e, index) => {
                                let columnWidth = 100;
                                if(e.columnWidth){
                                    columnWidth = e.columnWidth;
                                }
                                return(
                                    <Column
                                        key={index}
                                        columnKey={e.columnName}
                                        header={<Cell>{e.showName}</Cell>}
                                        cell={<TextCell data={dataList} />}
                                        flexGrow={1}
                                        width={columnWidth}
                                    />
                                )
                            })
                        }

                        <Column
                            columnKey=""
                            header={<Cell>操作</Cell>}
                            cell={
                                ({rowIndex}) => (
                                    <Cell>
                                        <a onClick={this.cellEditHandle.bind(this, dataList[rowIndex])} className="cellEdit"></a>
                                        <a onClick={this.cellDeleHandle.bind(this, dataList[rowIndex]['loginName'])} className="cellDele"></a>
                                    </Cell>
                                )
                            }
                            flexGrow={1}
                            width={100}
                            rightFixed={true}
                        />
                    </Table>


                    <PageButton { ...this.state } pageNext={this.pageNext}/>
                </div>


                <AddUserPage ref="addUser" />
            </div>
        );
    }
}

class TextCell extends Component {
    render() {
        const {data, rowIndex, columnKey, ...props} = this.props;
        return (
            <Cell {...props}>
                {data[rowIndex][columnKey]}
            </Cell>
        );
    }
};
export default Dimensions({
    getHeight: function(element) {
        return window.innerHeight - 360;
    },
    getWidth: function(element) {
        let widthOffset = 320;
        return window.innerWidth - widthOffset;
    },
    //containerStyle: {marginLeft: 8, marginRight: 8 } //, transitionProperty: 'width', transitionDuration: '0.5s', transitionTimingFunction:'linear'
})(ListTest);
